<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 200%;
            height: 200%;
        }

        .box {
            /* height: 200px;
            width: 200px; */
            /* background-color: rgb(190, 127, 127); */
            margin: 10px 100px;
            padding: 10px;
            border: 1px solid black;
        }

        .wrap {
            width: 400px;
            height: 400px;
            background-color: rgb(141, 192, 199);
            margin: 100px;
            position: relative;
        }

        .sub {
            width: 300px;
            height: 300px;
            background-color: rgb(138, 93, 150);
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .txt {
            width: 100px;
            height: 100px;
            background-color: rgb(156, 196, 119);
            position: absolute;
            left: 100px;
            top: 100px;
        }

        .back {
            width: 50px;
            height: 50px;
            position: fixed;
            right: 10px;
            bottom: 10px;
            line-height: 40px;
            background-color: rgb(201, 146, 94);
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="sub">
            <div class="txt"></div>
        </div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="back">top</div>


</body>

<script>
    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#";
        for (let i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }
    // css()  设置样式
    $(".box").css({
        height: "100px",
        width: "100px",
        background: randColor    // 接收一个回调函数,每次循环更改样式时,都会随机更改一个颜色
        // background: randColor()  调用randColor()  => 得到一个随机的颜色
    })

    // getstyle()  content
    // ele.clientwidth    content + padding
    // ele.offsetwidth    content + padding + border


    // width() height() 获取和设置元素的宽高   content
    console.log($(".box").width(), $(".box").height());
    $(".box").width(200), $(".box").height(200);


    // innerWidth() innerHeight() 获取和设置元素的可视宽高  content + padding
    console.log($(".box").innerWidth(), $(".box").innerHeight());
    $(".box").innerWidth(100), $(".box").innerHeight(100);


    // outerWidth() outerHeight() 获取和设置元素的偏移宽高   content + padding + border  
    console.log($(".box").outerWidth(), $(".box").outerHeight());
    $(".box").outerWidth(200), $(".box").outerHeight(200);
</script>


<!-- offset  position -->
<script>
    // offset()  返回匹配元素相对于父元素(定位的参照物)的偏移 => {left,top}
    console.log($(".txt").offset());


    // position  返回匹配元素相对于父元素的位置（偏移） => {left,top}
    console.log($(".txt").position());


    // scrollLeft()  获取和设置 滚动条距离文档左边的位置
    // scrollTop()  获取和设置 滚动条距离文档左边的位置
    $(window).scroll(function () {
        console.log($(window).scrollLeft(), $(window).scrollTop());
    })

    $(".back").click(function () {
        $(window).scrollLeft(0).scrollTop(0);
    })
</script>

</html>